<template>
	<view class="content-img">
		<eui-nav-bar title="机构选择" color="#000" rightIcon="" />
		<eui-search-bar ref="storeSearch" v-model="searchValue" @confirm="selStoreById" radius="100"
			placeholder="搜索机构编码、名称" showFilter>
			<template #searchFields>
				<view class="search-fields">
					<scroll-view scroll-y style="height: 300px;">
						<view class="center">
							<DateCard v-model="selInfo.c_store_type" :modelValue="selInfo.c_store_type" title="机构类型"
								type="radio" :range="storeTypeList" @buttonClick="buttonClickStoreType"></DateCard>
							<DateCard v-model="selInfo.c_finance" :modelValue="selInfo.c_finance" title="结算分区"
								type="radio" :range="financeList" @buttonClick="buttonClickFinance"
								v-if="ISfinance&&bIsSLPlamt"></DateCard>
							<DateCard v-model="selInfo.c_store_group" :modelValue="selInfo.c_store_group" title="店群"
								type="radio" :range="storeGroupList" @buttonClick="buttonClickGroup" v-if="bIsSLPlamt">
							</DateCard>
							<DateCard v-model="selInfo.c_store_id" :modelValue="selInfo.c_store_id" title="机构"
								type="radio" :range="storeList" @buttonClick="buttonClickStore"></DateCard>
							<DateCard v-model="selInfo.c_store_status" :modelValue="selInfo.c_store_status" title="机构状态"
								type="radio" :range="storeStatuslist" @buttonClick="buttonClickStatus"
								v-if="!SelectedStatus"></DateCard>
							<!-- <eui-card-input v-model="selInfo.c_store_type" title="机构类型" :range="storeTypeList"
								type="radio" alignType="left" @buttonClick="buttonClickStoreType" />
							<eui-card-input v-model="selInfo.c_finance" title="结算分区" :range="financeList" type="radio"
								alignType="left" @buttonClick="buttonClickFinance" v-if="ISfinance&&bIsSLPlamt" />
							<eui-card-input v-model="selInfo.c_store_group" title="店群" :range="storeGroupList"
								type="radio" alignType="left" @buttonClick="buttonClickGroup" v-if="bIsSLPlamt" />
							<eui-card-input v-model="selInfo.c_store_id" title="机构" :range="storeList" type="radio"
								alignType="left" @buttonClick="buttonClickStore" />
							<eui-card-input v-model="selInfo.c_store_status" title="机构状态" :range="storeStatuslist"
								type="radio" alignType="left" @buttonClick="buttonClickStatus" /> -->
						</view>
					</scroll-view>
					<view class="bottom flex-1 flex">
						<view class="flex-1 flex" style="padding-right: 7.5px;" @click="clearselect">
							<view class="flex-1 flex justify-content-center align-items-center bottom-bg"
								style="border: solid 1rpx rgba(136, 136, 136, 1);font-size: 15px;">重置</view>
						</view>
						<view class="flex-1 flex justify-content-center align-items-center" style="padding-left: 7.5px;"
							@click="confirmCondition">
							<view class="flex-1 flex justify-content-center align-items-center bottom-bg button-theme"
								:class="[theme]" style="color: #fff;font-size: 15px;">
								确认</view>
						</view>
					</view>
					<!-- <view class="bottom flex-1 flex">
						<eui-button type="max2" title="重置" @click="clearselect"></eui-button>
						<eui-button type="max" title="确认" @click="confirmCondition"></eui-button>
					</view> -->
				</view>
			</template>
		</eui-search-bar>
	</view>
	<view class="main-view">
		<view class="main-view-bg">
			<view class="main-view-fast padding-20 font-size-28 color-888">
				<view class="font-size-24">快速选择</view>
				<view class="flex flex-wrap-wrap margin-top-20">
					<view class="width-fit-content margin-bottom-20" v-for="(item,index) in currentlist" :key="index">
						<eui-tag :text="item.c_title" plain shape="circle"
							:bgColor="item.c_store?'rgba(2, 183, 230, 0.10)':'rgba(249, 249, 248, 1)'"
							:borderColor="item.c_store?'rgba(2, 183, 230, 1)':'rgba(249, 249, 248, 1)'"
							:color="item.c_store?'rgba(2, 183, 230, 1)':'rgba(0, 0, 0, 1)'"
							@click="setTagBackItem(item)"></eui-tag>
					</view>
				</view>
			</view>
			<scroll-view scroll-y lower-threshold='88' @refresherrefresh="onRefresh" @scrolltolower="templateLower"
				:refresher-enabled='true' :refresher-triggered="triggered"
				:style="{width:scrollWidth,height:scrollHeight}">
				<view class="padding-left-28 font-size-28 flex flex-direction-column" v-for="(item,index) in dateList"
					:key="index" @click="setSelBackItem(item)">
					<view class="sroll-store-list flex">
						<view class="flex align-items-center margin-right-10">
							<checkbox value="cb" :checked="item.c_checked" @click.stop="setSelBackItem(item)"
								:color="themeColor" :class="[theme]" style="transform:scale(0.8)" v-if="IsMult=='是'"/>
							<radio :value="item.c_id" :checked="item.c_checked" @click.stop="setSelBackItem(item)"
								:color="themeColor" :class="[theme]" style="transform:scale(0.8)" v-else/>
						</view>
						<view class="flex-1">
							<view class="font-weight-bold">[{{item.c_id}}]{{item.c_name}}</view>
							<view class="flex margin-top-20 font-size-24">
								<view class="flex-1"><span class="color-888 margin-right-14">类型 </span><span
										v-if="item.c_type_name">{{item.c_type_name}}</span></view>
								<view class="flex-1"><span class="color-888 margin-right-14">城市 </span><span
										v-if="item.c_city_no">[{{item.c_city_no}}]{{item.c_city}}</span></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="user-footer flex-1 flex">
				<!-- <eui-button type="primary" title="确定" @click="BackMultParm" singleTag="primary_主按钮" /> -->
				<view class="flex-1 flex" style="padding-right: 7.5px;" @click="CancelCondition">
					<view class="flex-1 flex justify-content-center align-items-center bottom-bg"
						style="border: solid 1px rgba(136, 136, 136, 1);font-size: 15px;">取消</view>
				</view>
				<view class="flex-1 flex justify-content-center align-items-center" style="padding-left: 7.5px;"
					@click="BackMultParm">
					<view class="flex-1 flex justify-content-center align-items-center bottom-bg button-theme"
						:class="{'opacity-half':!hasChecked,[theme]:true}" style="color: #fff;font-size: 15px;">
						确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup type="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import service from '../../common/service';
	import Enjoy from '../../common/enjoy';
	import { storeToRefs } from 'pinia';
	import { useMainStore } from '../../store/modules/store';
	import { useLoginStore } from '../../store/modules/useLoginStore';
	import { useThemeStore } from '../../store/themeStore';
	import DateCard from "@/components/DateCard/index"
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	const themeColor = ref(themeStore.theme == 'theme-blue' ? '#02B7E6' : '#FF6430')

	const IsNotPage = ref(false);
	const IsMult = ref('否');
	const SelectedItems = ref("");
	const SelectedStatus = ref("");
	const searchValue = ref('');
	const triggered = ref(false);
	const ISfinance = ref(false);
	const bIsSLPlamt = ref(false);
	const currentlist = ref([]);
	const WhereList = ref([]);
	const dataPage = ref({
		CurrentPage: 1, //当前页码
		PageCount: 0,//总共多少页
		PageSize:20,//一页多少条
		RowsCount: 0,//总共多少条
	})
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth - 20 + 'px');
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight-210+'px');
	const WindowHeight = ref(uni.getSystemInfoSync().windowHeight);
	const storeTypeList = ref([]);
	const financeList = ref([]);
	const storeGroupList = ref([]);
	const storeList = ref([]);
	const storeStatuslist = ref([{
		text: "全部",
		value: "全部"
	},{
		text: "开业准备",
		value: "开业准备"
	},{
		text: "正常营业",
		value: "正常营业"
	},{
		text: "作废",
		value: "作废"
	}]);
	const selInfo = ref({
		c_store_type:'全部',
		c_finance:'全部',
		c_store_group:'全部',
		c_store_id:'全部',
		c_store_status:'全部',
	})
	const dateList = ref([])
	const reasonList = ref(['出差','繁忙','请假','无'])
	const storeSearch = ref(null)
	const rdsDict = ref([])
	const hasChecked = ref(false)

	const selStoreById =()=>{
		dataPage.value.CurrentPage = 1;
		dateList.value = [];
		StoreListByParams();
	}
	// 重置选项
	const clearselect = ()=>{
		selInfo.value={
			c_store_type:'全部',
			c_finance:'全部',
			c_store_group:'全部',
			c_store_id:'全部',
			c_store_status:'全部',
		}
	}
	const confirmCondition = ()=>{
		console.log('confirmCondition');
		storeSearch.value.closeDrawer();
		dataPage.value.CurrentPage = 1;
		dateList.value = [];
		StoreListByParams();
	}
	// 下拉刷新
	const onRefresh = ()=>{
		if (triggered.value) {
			return false;
		};
		triggered.value = true;
		dataPage.value.CurrentPage = 1;
		dateList.value = [];
		StoreListByParams();
		setTimeout(() => {
			triggered.value = false;
		}, 1000)
	}
	// 加载更多
	const templateLower = ()=>{
		if (dataPage.value.CurrentPage < dataPage.value.PageCount) {
			dataPage.value.CurrentPage +=1;
			StoreListByParams();
		}
	}
	const onClickGoToDetail = e=>{
		console.log('onClickGoToDetail'+JSON.stringify(e));
	}
	const buttonClickStoreType = (e)=>{
		selInfo.value.c_store_type=e.modelType
	}
	const buttonClickFinance = (e)=>{
		selInfo.value.c_finance=e.modelType
	}
	const buttonClickGroup = (e)=>{
		selInfo.value.c_store_group=e.modelType
	}
	const buttonClickStore = (e)=>{
		selInfo.value.c_store_id=e.modelType
	}
	const buttonClickStatus = (e)=>{
		selInfo.value.c_store_status=e.modelType
	}
	const SubIdByName = id =>{
		let no = "";
		if(id.indexOf('[')>=0&&id.indexOf(']')){
			no = id.substring(id.lastIndexOf('[') + 1,id.lastIndexOf(']'))
		}else{
			no = id;
		}
		return no
	}
	const StoreListByParams = ()=>{
		service.enjoyShowLoading('正在加载...');
		let request = {
		    url: LoginStore.EnjoyRMIS?LoginStore.EnjoyRMIS:LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40公共",
		        ObjectData: {
					IsNotPage: IsNotPage.value,
					PageSize: dataPage.value.PageSize,
					CurrentPage: dataPage.value.CurrentPage,
					UserNo: mainStore.loginInfo.sUser,
					StoreId: searchValue.value,
					Id: selInfo.value.c_store_id=='全部'?'':selInfo.value.c_store_id,
					ConNo: selInfo.value.c_finance=='全部'?'':selInfo.value.c_finance,
					Type: selInfo.value.c_store_type=='全部'?'':selInfo.value.c_store_type,
					SourceId: selInfo.value.c_store_group=='全部'?'':selInfo.value.c_store_group,
					Status: SelectedStatus.value?SelectedStatus.value:(selInfo.value.c_store_status=='全部'?'':selInfo.value.c_store_status),
					WhereList: WhereList.value
				},//mainStore.loginInfo.sUser, 00000010
		        MethodName: "StoreListByParams",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					if(ObjectData){
						dataPage.value.RowsCount = ObjectData.RowsCount;
						dataPage.value.PageCount = ObjectData.PageCount;
						const list = ObjectData.ReturnObject;
						if (list && list.length > 0) {
							let selD = [];
							if(SelectedItems.value){
								selD = SelectedItems.value.split(',');
							}
							for (let i = 0; i < list.length; i++) {
								if(selD.length>0){
									let cN = 0;
									for (let bb = 0; bb < selD.length; bb++) {
										if(list[i].c_id==selD[bb]){
											cN+=1;
										}
									}
									dateList.value.push({
										...list[i],
										c_checked:cN>0?true:false,
										c_type_name: rdsDict.value.filter(Dict=>Dict.c_id==list[i].c_type)[0].c_name
									});
								}else{
									dateList.value.push({
										...list[i],
										c_checked:false,
										c_type_name: rdsDict.value.filter(Dict=>Dict.c_id==list[i].c_type)[0].c_name
									});
								}
							}
						}
					}
					DataHasChecked();
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const setTagBackItem = e =>{
		if(IsMult.value == '否'){
			let parms = {
				Key: e.c_id,
				Value: e.c_name,
				Type:''
			}
			Enjoy.DialogCallBack(parms)
		}else{
			e.c_store = !e.c_store;
		}
	}
	const setSelBackItem = e=>{
		if(IsMult.value == '否'){
			for (let i = 0; i < dateList.value.length; i++) {
				dateList.value[i].c_checked=false;
				if(dateList.value[i].c_id == e.c_id){
					dateList.value[i].c_checked=true;
				}
			}
			// let parms = {
			// 	Key: e.c_id,
			// 	Value: e.c_name,
			// 	Type:e.c_type
			// }
			// Enjoy.DialogCallBack(parms)
		}else{
			e.c_checked = !e.c_checked;
		}
		DataHasChecked()
	}
	const CancelCondition = () =>{
		uni.navigateBack({
			delta: 1
		});
	}
	// 多选情况下处理选中的数据以及返回处理
	const BackMultParm = () =>{
		if(!hasChecked.value){
			return false
		}
		let cKey = [];
		let cValue = [];
		let cType = [];
		for (let i = 0; i < currentlist.value.length; i++) {
			if(currentlist.value[i].c_store){
				cKey.push(currentlist.value[i].c_id);
				cValue.push(currentlist.value[i].c_name);
				cType.push('');
			}
		}
		for (let i = 0; i < dateList.value.length; i++) {
			if(dateList.value[i].c_checked){
				cKey.push(dateList.value[i].c_id);
				cValue.push(dateList.value[i].c_name);
				cType.push(dateList.value[i].c_type);
			}
		}
		if(cKey.length==0){
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: '请先选择机构!',
			});
			return false;
		}
		let parms = {
			Key: cKey.toString(),
			Value: cValue.toString(),
			Type:cType.toString(),
		}
		Enjoy.DialogCallBack(parms)
	}
	const getCurrentDate = e =>{
		/*
		if (currentlist.value.length > 2) {
			currentlist.value.splice(2, 1);
		}
		let request = {
		    url: LoginStore.EnjoyRMIS?LoginStore.EnjoyRMIS:LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40销售监测",
		        ObjectData: {
					longitude: e.currentLon,
					latitude: e.currentLat
				},
		        MethodName: "GetGpsStore",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					if (ObjectData && ObjectData.length > 0 && currentlist.value.length >= 2) {
						currentlist.value.push({
							c_id: ObjectData[0].c_id,
							c_name: (ObjectData[0].c_sname == null ? '' : ObjectData[0].c_sname),
							c_title: '[' + ObjectData[0].c_id + ']' + (ObjectData[0].c_sname == null ? '' : ObjectData[0].c_sname),
							c_store: false,
							c_class_name: '',
						});
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
		}, () => {
		    console.log('失败')
		});
		*/
	}
	const GetSyscfg = ()=>{
		let whereList = [{
			c_type_name: '',
			c_col: 'c_type',
			c_oper: '=',
			c_value: "财务、结算",
			c_col_dtype: "System.String",
			c_logic: "而且",
		},{
			c_type_name: '',
			c_col: 'c_class',
			c_oper: '=',
			c_value: "财务帐套号",
			c_col_dtype: "System.String",
			c_logic: "或者",
		},{
			c_type_name: '',
			c_col: 'c_name',
			c_oper: '=',
			c_value: "是否使用结算分区",
			c_col_dtype: "System.String",
			c_logic: "或者",
		}]
		let request = {
		    url: LoginStore.EnjoyRMIS?LoginStore.EnjoyRMIS:LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40公共",
		        ObjectData: {
					whereList
				},
		        MethodName: "GetSyscfg",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ReturnObject = res.data.ObjectData.ReturnObject;
					financeList.value.push({
						text: '全部',
						value: '全部'
					});
					if (ReturnObject && ReturnObject.length > 0) {
						for (let i = 0; i < ReturnObject.length; i++){
							if (ReturnObject[i].c_name && ReturnObject[i].c_name == '是否使用结算分区') {
								ISfinance.value = !(ReturnObject[i].c_value == '是' ? false : true);
							} else {
								financeList.value.push({
									text: ('[' + ReturnObject[i].c_name + ']' + (ReturnObject[i].c_comment == null ? '' : ReturnObject[i].c_comment)),
									value: ReturnObject[i].c_name
								})
							}
						}
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
		}, () => {
		    console.log('失败')
		});
	}
	const StoreGroupList = ()=>{
		/*
		let request = {
		    url: LoginStore.EnjoyRMIS?LoginStore.EnjoyRMIS:LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40公共",
		        ObjectData: {
					IsNotPage: true,
				},//mainStore.loginInfo.sUser,
		        MethodName: "StoreGroupList",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ReturnObject = res.data.ObjectData.ReturnObject;
					storeGroupList.value.push({
						text: '全部',
						value: '全部'
					});
					if (ReturnObject && ReturnObject.length > 0) {
						for (let i = 0; i < ReturnObject.length; i++){
							storeGroupList.value.push({
								text: ('[' + ReturnObject[i].c_gid + ']' + (ReturnObject[i].c_gname == null ? '' : ReturnObject[i].c_gname)),
								value: ReturnObject[i].c_gid
							})
						}
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
		}, () => {
		    console.log('失败')
		});
		*/
	}
	const GetQueryStore = ()=>{
		let request = {
		    url: LoginStore.EnjoyRMIS?LoginStore.EnjoyRMIS:LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40公共",
		        ObjectData: {
					userno:mainStore.loginInfo.sUser
				},
		        MethodName: "GetQueryStore",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					storeList.value.push({
						text: '全部',
						value: '全部'
					})
					if (ObjectData && ObjectData.length > 0) {
						for (let i = 0; i < ObjectData.length; i++){
							storeList.value.push({
								text: ('[' + ObjectData[i].c_id + ']' + (ObjectData[i].c_sname == null ? '' : ObjectData[i].c_sname)),
								value: ObjectData[i].c_id
							})
						}
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
		}, () => {
		    console.log('失败')
		});
	}
	
	// 获取字典数据
	const getAllDicData = async () => {
	    const dictList = await service.getLocalStorage('rdsDict');
		rdsDict.value = dictList ? dictList.filter(item=>item.c_class_name=='机构类型') : [{
				c_id: 0,c_name:'总部'
			},{
				c_id: 1,c_name:'分区总部'
			},{
				c_id: 2,c_name:'分店'
			},{
				c_id: 3,c_name:'配送中心'
			}];
	}
	const DataHasChecked = () =>{
		hasChecked.value = false;
		for (let i = 0; i < dateList.value.length; i++) {
			if(dateList.value[i].c_checked){
				hasChecked.value = true;
			}
		}
	}
	onLoad(async (option)=>{
		console.log("option: " + JSON.stringify(option));
		await getAllDicData();
		storeTypeList.value.push({
			text: '全部',
			value: '全部'
		});
		let num = 0;
		if(option&&option.IsMult){
			IsMult.value = option.IsMult;
			setTimeout(function() {
				uni.getSystemInfo({
					success: function(res) {
						const userInfoPage = uni.createSelectorQuery().select(".content-img");
						userInfoPage.boundingClientRect(function(data) {
							scrollHeight.value = (res.windowHeight - data.height - 145 - uni.getSystemInfoSync().safeAreaInsets.bottom)+'px';
						}).exec()
					}
				});
			}, 500);
		}
		if(option&&option.SelectedItems){
			SelectedItems.value = option.SelectedItems;
		}
		if(option&&option.WhereList){
			WhereList.value = JSON.parse(option.WhereList);
			for (let i = 0; i < WhereList.value.length; i++) {
				if (WhereList.value[i].c_col == 'c_type') {
					let storeTypeItem = rdsDict.value ? rdsDict.value.filter(item => item.c_id == WhereList.value[i].c_value) : false;
					if(storeTypeItem && storeTypeItem.length>0){
						num += 1;
						storeTypeList.value.push({
							text: storeTypeItem[0]['c_name'],
							value: WhereList.value[i].c_value
						});
					}
				}
			}
		}
		if(option&&option.IsNotPage){
			IsNotPage.value = option.IsNotPage;
		}
		if(option&&option.IsStatust){
			SelectedStatus.value = option.IsStatust;
		}
		if (num == 0) {
			storeTypeList.value = [{
				text: '全部',
				value: '全部'
			},{
				text: '总部',
				value: '0'
			},{
				text: '分区总部',
				value: '1'
			},{
				text: '分店',
				value: '2'
			},{
				text: '配送中心',
				value: '3'
			}]
		}
		if (mainStore.loginInfo.sUserStore) {
			currentlist.value.push({
				c_id: mainStore.loginInfo.sUserStore,
				c_name: mainStore.loginInfo.sUserStoreName,
				c_title: '所属机构',
				c_store: false,
				c_class_name: '',
			});
		}
		if (mainStore.loginInfo.sStoreId) {
			currentlist.value.push({
				c_id: mainStore.loginInfo.sStoreId,
				c_name: mainStore.loginInfo.sStoreName,
				c_title: '当前机构',
				c_store: false,
				c_class_name: '',
			});
		}
		if(mainStore.loginInfo.idsToken && mainStore.loginInfo.idsToken.access_token){
			bIsSLPlamt.value = false;
		}else{
			bIsSLPlamt.value = true;
			GetSyscfg();
			StoreGroupList();
		}
		GetQueryStore();
		Enjoy.GeolocationPosition('getCurrentPosition',position=>{
			if(position.coords.longitude&&position.coords.latitude){
				getCurrentDate({
					currentLon: position.coords.longitude,
					currentLat: position.coords.latitude
				});
			}
		});

		StoreListByParams();
	})
</script>

<style lang="scss" scoped>
	@import '../../main.scss';

	.content-img {
		background-color: #FFFFFF;
		background-repeat: no-repeat;
		width: 100%;
	}

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-direction-column {
		flex-direction: column !important;
	}

	.width-fit-content {
		width: fit-content;
	}

	.flex-wrap-wrap {
		flex-wrap: wrap;
	}

	.padding-20 {
		padding: 0 20rpx;
	}

	.margin-bottom-20 {
		margin-bottom: 20rpx;
	}

	.margin-top-20 {
		margin-top: 20rpx;
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.font-size-28 {
		font-size: 28rpx;
	}

	.color-888 {
		color: rgba(136, 136, 136, 1);
	}

	.padding-left-28 {
		padding-left: 28rpx;
	}

	.sroll-store-list {
		padding: 20rpx 28rpx 20rpx 0;
		border-bottom: solid 1rpx rgba(238, 238, 238, 1);
		line-height: 1;
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		padding: 20rpx;
		background-color: #f2f2f2;
	}

	.main-view-bg {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0;
	}

	.search-fields {
		width: 100%;
		background: #FFFFFF;

		.center {
			padding-bottom: 22rpx;
		}

		.bottom {
			background: #ffffff;
			border-top: 1rpx solid $uni-line-color;
			display: flex;
			justify-content: center;
			padding: 20rpx;
		}
	}

	.store-checked {
		background-color: rgba(249, 250, 252, 1) !important;
	}

	.user-footer {
		position: fixed;
		z-index: 9;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 28rpx;
	}

	.margin-right-14 {
		margin-right: 14rpx;
	}

	.margin-right-10 {
		margin-right: 10rpx;
	}

	.justify-content-center {
		justify-content: center;
	}

	.bottom-bg {
		height: 40px;
		border-radius: 20px;
	}

	.align-items-center {
		align-items: center;
	}

	::v-deep .m-card-radio-view {
		flex-direction: column;
	}

	::v-deep .m-title-text {
		color: #000;
	}

	.button-theme {
		background: var(--theme-bgc-color);
	}

	.font-weight-bold {
		font-weight: 600;
	}

	::v-deep .uni-checkbox-input {
		border-radius: 50%;
		// background: var(--theme-bgc-color);
		border: 1px solid var(--theme-color);
	}

	::v-deep .uni-checkbox-input svg {
		transform: translate(-100%, -100%) scale(1);
		background: var(--theme-bgc-color);
		border-radius: 50%;
		color: #fff !important;
		top: 22px;
		left: 22px;
	}

	::v-deep .uni-checkbox-input svg path {
		fill: #fff !important;
		transform: translate(10%, 10%) scale(0.8);
	}

	.opacity-half {
		opacity: 0.5;
	}
</style>
